<template>
	<view class="apps">
		<view class="group">
			<view class="groupImage"><image :src="commonData.image1"></image></view>
			<view class="grade mlr10 pdlr10 ptb5" v-if="commonData.grade.length > 0">
				<view class="flex fdc" v-for="(item,index) in commonData.grade" :key="index">
					<view class="flex f1 fontg fweight6 f36r ptb20 plr15">{{item.title}}</view>
					<uv-grid :col="4">
						<uv-grid-item v-for="(im,idx) in item.children" :key="idx">
							<view class="plr10 ptb10 flex box w100p pst" @click="popShow(im)">
								<view class="f1 flex jcc ptb20 plr20 box bg44 w100p"><text class="f28r fweight4">{{im.title}}</text></view>
							</view>
						</uv-grid-item>
					</uv-grid>
				</view>
			</view>
		</view>
		<l-popup v-model="commonData.modal"  :closeOnClickOverlay="false" zindex="1001" :closeable="true">
			<view class="w720 plr20 box flex fdc">
				<view class="flex aic jcc ptb30">
					<view class="f36r fweight4 fontg">请选择单元开始游戏</view>
				</view>
				<uv-grid :col="4">
					<uv-grid-item v-for="(item,index) in commonData.words" :key="index">
						<view class="plr10 ptb20 flex box w100p pst" @click="choosePlayId(item.id)">
							<view :class="item.id == commonData.active ?`flex jcc ptb20 plr20 box bd44 bd44-avtive w100p` :`flex jcc ptb20 plr20 box bd44 w100p`"><text class="f28r fweight4">{{item.title}}</text></view>
						</view>
					</uv-grid-item>
				</uv-grid>
				<view class="tb20 flex plr20 ptb30">
					<view class="f1 flex jcc aic f36r ptb20 bg44 fweight4" @click="choosePlayStart">游戏开始</view>
				</view>
			</view>
		</l-popup>
		<l-popup v-model="commonData.load" bgColor="#ffffff00" :closeOnClickOverlay="false" zindex="1001">
			<l-liquid :percent="70" outline  innerColor="#b6ead3" waveColor="#44d7bb">
			  <view class="load-txt">
			    <text>{{commonData.remark}}</text>
			  </view>
			</l-liquid>
		</l-popup>
	</view>
</template>

<script setup>
	import { util } from '/common/util.js';
	import { ref , reactive, nextTick,toRefs, watch  } from 'vue';
	import { onLoad,onShow } from '@dcloudio/uni-app'
	//数据
	const commonData = reactive({
		image1:util.config.url+'static/images/1.jpg',
		image2:util.config.url+'static/images/2.jpg',
		modal:false,
		load:true,
	    remark: '加载中',
		active:0,
	    list:[],
		grade:[],
		version:[],
		words:[],
	})
	/**弹出学段*/
	const popShow= (item) =>{
		
		commonData.words =item.children || [];
		console.log(commonData.words);
		if(commonData.words.length < 1){
			util.alert('此类目下无单元数据');
			return;
		}
		commonData.active = commonData.words[0].id;
		commonData.modal =true;
	}
	/**获取学段*/
	const getGrate= () => {
		commonData.load = true;
		util.request({
			url:'/mpindex/grade',
			success:(res)=>{
				if(res.code == 1){
					commonData.grade =res.data;
				}
			},
			complete:()=>{
				commonData.load = false;
			}
		})
	}
	//选择游戏单元
	const choosePlayId = (id)=>{
		commonData.active = id;
		console.log(commonData.active);
	}
	const choosePlayStart =()=>{
		console.log(commonData.active);
		const { active }= commonData;
		commonData.modal = false;
		commonData.active = 0;
		console.log(active);
		uni.navigateTo({
			url:'/pages/index/play?id='+active,
		})
	}
	//加载
	onLoad( () => {
		getGrate();
		
	})
</script>

<style lang="scss" scoped>
	.fontg{color:#44d7bb;}
	.pst{perspective:800px;}
	.w720{width:720rpx; min-height:100rpx;}
	.bd44{border:1rpx solid #eee;color:#44d7bb; border-radius:3rpx;}
	.bd44-avtive{ border-color: #44d7bb !important;}
	.bg44{background-image:linear-gradient(#44d7bb,#36c1a7,#44d7bb);color:#fff; border-radius:5rpx;}
	.bg55{background-image:linear-gradient(#73b2ff,#5d9eff,#73b2ff);color:#fff; border-radius:5rpx;}
	.load-txt{color:#fff;}
	
	.group{display:flex;flex-direction: column; box-sizing: border-box;
		.groupImage{height:469rpx;
			image{width:100%;height:100%;display:block;}
		}
		.grade{margin-top:-180rpx;border:1px solid #44d7bb; background-color: #e9f8f4; border-top-left-radius:20rpx;border-top-right-radius:20rpx;min-height: 300px;}
	}
	
</style>
